<template>
   <nav class="app-topnav">
    <div class="container">
      <ul >
         <template v-if="profile.token">
            <li><router-link to="/member"> <i class="iconfont icon-user"></i>{{profile.account}}</router-link></li>
            <li><a href="" @click="loginOut">退出登录</a></li>
         </template>
         <template v-else>
            <li><router-link to="/login">请先登录</router-link></li>
            <li><a href="">免费注册</a></li>
          </template>
          <li><a href="">我的订单</a></li>
          <li><a href="">会员中心</a></li>
          <li><a href="">帮助中心</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href=""><i class="iconfont icon-phone"></i>手机版</a></li>
      </ul>
    </div>
  </nav>
</template>

<script>
import Message from '@/components/library/Message'
import {useStore} from 'vuex'
import {computed} from 'vue'
import { useRouter } from 'vue-router'
export default {
name: 'AppNavBar',
setup(){
    const store = useStore()
    // 用户信息
    const profile=computed(()=>{
        return store.state.user.profile
    })
    const router = useRouter()

    const loginOut=()=>{
        // 退出登录，清空user和本地购物车
        store.commit('user/setUser',{})
        store.commit('cart/setCart',[])
         Message({ type: 'success', text: '已退出登录' })
        router.push('/login')
    }
    return {profile,loginOut}
}
}
</script>

<style lang='less' scoped>
@import '~@/assets/styles/variables.less';
.app-topnav{
    background-color: #333;
    ul{
        display: flex;
        height: 53px;
        justify-content: flex-end;
        align-items: center;
        li{
            a{
                padding: 0 15px;
                color: #cdcdcd;
                line-height: 1px;
                display: inline-block;
                i{
                    font-size: 14px;
                    margin-right: 2px;
                }
                &:hover{
                    color: @xtxColor;
                }
            }
            ~ li{
                
                    border-left: 2px solid #666;
                
            }
        }
    }
}
</style>